<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>express首页</title>
</head>
<body>
    <p>欢迎使用express框架写接口</p>
    <div>
        <button onclick="getUserList()">获取用户列表</button>
        <ul id="user-list"></ul>
        <button onclick="getFoodList()">获取食物列表</button>
        <ul id="food-list"></ul>
        <button onclick="register()">注册</button>
    </div>
</body>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>
<script>
// 获取ul元素
let userUl = document.querySelector('#user-list')
let foodUl = document.querySelector('#food-list')

/* 获取用户列表 */
function getUserList() {
   /*  $.ajax({
        method: 'get',
        dataType: 'jsonp',
        url: 'http://localhost:8000/get_user_list',
        success: (res) => userList(res)
    }) */
    axios.get('http://localhost:8000/get_user_register_list').then(res =>  userList(res))
}
function userList(res) {
    let useList = res.data
    userUl.innerHTML = ''
    var  oTemp = document.createDocumentFragment();  
    for(var i = 0; i < useList.length;i++) {
        let li = document.createElement('li')
        li.innerHTML = useList[i].name
        oTemp.appendChild(li)
    }
    userUl.appendChild(oTemp)
}

/* 获取食物列表 */
function getFoodList () {
   /*  $.ajax({
        url: 'http://localhost:8000/get_food_list',
        method: 'get',
        dataType: 'jsonp',
        success: (res) => foodList(res)
    }) */
    axios.get('http://localhost:8000/get_food_list').then(res =>  foodList(res))
}
function foodList (res) {
    var oTemp = document.createDocumentFragment()
    let foodList = res.data
    foodUl.innerHTML = ''
    foodList.forEach(item => {
        let li = document.createElement('li')
        li.innerHTML = item.name
        oTemp.appendChild(li)
    });
    foodUl.appendChild(oTemp)
}

function register() {
    let param = {
        userName: '李白'
    }
    axios.post('http://localhost:8000/user_register',param).then(res =>  {
        console.log('注册成功：',res)
    })
}
</script>
</html>